.first {
  background: url(../../../../assets/images/first_background.jpg) no-repeat
    center center;
  background-size: cover;
  padding: 0.2rem;

  .writeColor {
    background-color: white;
    box-sizing: border-box;
    height: calc(100% - 0.4rem);
    padding-top: 0.35rem;
    overflow: hidden;
    animation: yidong 3s;
    animation-fill-mode: forwards;
    opacity: 0.2;
    transform: translateY(-100px);
    position: relative;

    .arrow {
      width: 0.38rem;
      height: 0.23rem;
      background: url(../../../../assets/images/biao.png) center center
        no-repeat;
      background-size: cover;
      position: absolute;
      left: 42%;
      bottom: 3%;
      animation: topbottommove 2s infinite linear;
    }

    .first-title {
      height: 0.368rem;
      background: url(../../../../assets/images/first_title.jpg) center center
        no-repeat;
      background-size: auto 0.36rem;
      transform: translateY(-15px);
      opacity: 0;
      animation: titlemove 3s 1s;
      animation-fill-mode: forwards;
    }

    .centerimg {
      height: 3.74rem;
      width: 2.7rem;
      background: url(../../../../assets/images/first_background.jpg) center
        center no-repeat;
      background-size: cover;
      margin-top: 0.1rem;
      margin: 0.1rem calc(100% - 3.17rem) 0.2rem;
      padding: 0.07rem;
      box-sizing: border-box;
      animation: imgzhanshi 2.5s 1.5s;
      animation-fill-mode: forwards;
      opacity: 0;

      .border {
        width: 2.56rem;
        height: 3.6rem;
        background: url(../../../../assets/images/first_border.png) center
          center no-repeat;
        background-size: 0;
        position: relative;
        animation: extend 1s linear 2s;
        animation-fill-mode: forwards;

        .border-bottom {
          width: 0.9rem;
          height: 0.08rem;
          background: url(../../../../assets/images/border_bottom.png) center
            center no-repeat;
          position: absolute;
          bottom: -0.05rem;
          left: 0.78rem;
          background-size: cover;
        }
      }
    }

    .name {
      height: 0.3466rem;
      font-size: 0.2rem;
      display: flex;
      justify-content: space-around;
      position: relative;

      .julian {
        margin-top: calc((0.3466rem - 0.16rem) / 2);
        width: 0.18rem;
        height: 0.16rem;
        background: url(../../../../assets/images/julian.jpg) center center
          no-repeat;
        background-size: cover;
        position: absolute;
        left: 1.57rem;
        opacity: 0;
        animation: jiacnhujuan 2s 1s;
        animation-fill-mode: forwards;
      }

      .nan {
        // text-align: right;
        margin-right: 0.2rem;
        line-height: 0.3466rem;
        // flex: 4.3;
        word-break: break-word;
        color: rgb(17, 75, 17);
        font-family: '楷体';
        white-space: pre-wrap;
        font-size: 0.3rem;
        position: absolute;
        left: 0.5rem;
        opacity: 0;
        animation: move 3s 1s;
        animation-fill-mode: forwards;
      }

      .nv {
        text-align: left;
        padding-left: 0.1rem;
        line-height: 0.3466rem;
        // flex: 5;
        word-break: break-word;
        color: rgb(17, 75, 17);
        font-family: '楷体';
        font-size: 0.3rem;
        position: absolute;
        right: 0.5rem;
        opacity: 0;
        animation: move1 3s 1s;
        animation-fill-mode: forwards;
      }
    }

    .time {
      font-size: 0.2rem;
      word-break: break-word;
      color: rgb(17, 75, 17);
      text-align: center;
      font-family: '楷体';
      white-space: pre-wrap;
      letter-spacing: -0.01rem;
      padding-top: 0.05rem;
      padding-right: 0.2rem;
      font-weight: 200;
      animation: timezhanshi 1.5s 2.5s;
      animation-fill-mode: forwards;
      overflow: hidden;
      height: 0;
    }

    .addr {
      font-size: 0.2rem;
      word-break: break-word;
      color: rgb(17, 75, 17);
      text-align: center;
      font-family: '楷体';
      white-space: pre-wrap;
      letter-spacing: -0.01rem;
      padding-top: 0.05rem;
      padding: 0 0.65rem 0 0.45rem;
      font-weight: 200;
      animation: addrzhanshi 1.5s 3.2s;
      animation-fill-mode: forwards;
      overflow: hidden;
      height: 0;
    }
  }
}

// 白色背景向下移动动画
@keyframes yidong {
  from {
    transform: translateY(-100px);
    opacity: 0.2;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

// 标题移动动画
@keyframes titlemove {
  from {
    transform: translateY(-15px);
    opacity: 0.1;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

// 图片渐出动画
@keyframes imgzhanshi {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

// 边框展开动画
@keyframes extend {
  from {
    background-size: 0 0;
  }

  to {
    background-size: 2.56rem 3.6rem;
  }
}

// 左侧名字移动动画
@keyframes move {
  0% {
    position: absolute;
    left: 0.3rem;
    opacity: 0;
  }

  100% {
    position: absolute;
    left: 0.8rem;
    opacity: 1;
  }
}

// 右侧名字移动动画
@keyframes move1 {
  0% {
    position: absolute;
    right: 0.3rem;
    opacity: 0;
  }

  100% {
    position: absolute;
    right: 0.8rem;
    opacity: 1;
  }
}

// 名字中间的卷渐出动画
@keyframes jiacnhujuan {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

// 名下时间
@keyframes timezhanshi {
  from {
    height: 0;
  }

  to {
    height: 0.3rem;
  }
}

// 名下地址
@keyframes addrzhanshi {
  from {
    height: 0;
  }

  to {
    height: 0.6rem;
  }
}

@keyframes topbottommove {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(20px);
  }

  100% {
    transform: translateY(0px);
  }
}
